<template>
  <div>
    <!-- 卡片视图 -->
    <!-- 搜索与添加区域 -->
    <el-row :gutter="20">
      <el-col :span="8"><el-input placeholder="输入手机号进行搜索" v-model="queryInfo.phone" clearable>
          <el-button slot="append" icon="el-icon-search" @click="queryByPhone"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addOrder">添加订单</el-button>
      </el-col>
    </el-row>
    <el-card>
      <el-table :data="orderList" :border="true" stripe>
        <el-table-column type="index" :resizable="false"></el-table-column>
        <el-table-column prop="orderId" label="订单编号"></el-table-column>
        <el-table-column prop="phone" label="手机号" :resizable="false"></el-table-column>
        <el-table-column prop="hallName" label="影厅名称" :resizable="false"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" :resizable="false">
          <template v-slot="scope">
            <span style="color: red" v-if="scope.row.orderStatus == 1">待支付</span>
            <span style="color: grey" v-if="scope.row.orderStatus == 0">已取消</span>
            <span style="color: green" v-if="scope.row.orderStatus == 2">已支付</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderPrice" label="订单价格（￥）" :resizable="false" width="120"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间" :resizable="false"></el-table-column>
        <el-table-column label="操作" :resizable="false" width="180">
          <template v-slot="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit"
              @click="editOrder(scope.row.orderId)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="
              deleteOrder(
                scope.row.orderId,
                scope.row.filmName,
                scope.row.playOpenTime,
                scope.row.seat
              )
              ">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, reactive, nextTick, getCurrentInstance, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()



let queryInfo = reactive({
  phone: "",
})
let orderList = ref([])
let addPlayVisible = ref(false)
let addForm = reactive({
  hallName: "一号影厅",
})
let filmList = reactive([])
let filmName = ref("")



async function getOrderList() {
  const { data: res } = await axios.get("/order/getOrderList");
  console.log(res);
  if (res.code != 200) {
     return ElMessage({
      message: res.message,
      type: "error",
    });
  } else {
    orderList.value = res.data;
  }
}

function addOrder() {
  router.push("/addOrder");
}
function editOrder(id) {
  router.push({ path: "/addOrder", query: { id: id } });
}
async function deleteOrder(orderId, filmName, playOpenTime, seat) {
  const res = await this.$confirm("永久删除，是否继续？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).catch((err) => err); //点取消会报错，捕获
  if (res != "confirm") {
    return this.$message.info("已取消删除");
  }
  const { data: result } = await this.$http.delete(
    "/order/removeOrder",
    {
      params: {
        orderId: orderId,
        filmName: filmName,
        playOpenTime: playOpenTime,
        seat: seat,
      },
    }
  );
  if (result.code != 200) {
    return ElMessage({
      message: result.message,
      type: "error",
    });
  }
  ElMessage({
    message: result.message,
    type: "sucess",
  });
  getOrderList();
}

onMounted(() => {
  getOrderList();
})

</script>

<style lang="less" scoped>
.el-dropdown-menu {
  width: 206.7px;
}
</style>